import React, { memo, useState } from 'react'

import Indicator from '@/base-ui/indicator'
import { DemoWrapper } from './style'

export default memo(function Demo() {
  const [selectIndex, setSelectIndex] = useState(0)
  const names = [
    'abc',
    'cdba',
    'asdf',
    'adfa',
    'dfsa',
    'asdf12',
    'aasd',
    'qwqw',
    'asd',
  ]

  function toggleClickHanlde(isNext = true) {
    let newIndex = isNext ? selectIndex - 1 : selectIndex + 1
    if (newIndex < 0) newIndex = names.length - 1
    if (newIndex > names.length - 1) newIndex = 0

    setSelectIndex(newIndex)
    console.log(newIndex)
  }

  return (
    <DemoWrapper>
      <div className="control">
        <button onClick={(e) => toggleClickHanlde(false)}>上一个</button>
        <button onClick={(e) => toggleClickHanlde(false)}>下一个</button>
      </div>
      <div className="list">
        <Indicator selectIndex={selectIndex}>
          {names.map((item) => {
            return <button key={item}>{item}</button>
          })}
        </Indicator>
      </div>
    </DemoWrapper>
  )
})
